import React, { useState, useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect } from 'umi'
import { queryParameterList,saveParameterInfo,deleteParameterById} from '../service'
import { Divider,message,Popconfirm,Button,notification} from 'antd'
import AddForm from './components/AddForm'
import moment from 'moment'

const TableList = () => {
  const actionRef = useRef()
  const [visible, setVisible] = useState(null)
  const [record,setRecord] = useState(null)
  const [loading,setLoading] = useState(false)

  const handleCancel = () => {
    setVisible(false)
    setRecord(null)
  }

  const handleSubmit = (values) => {
    setLoading(true)
    saveParameterInfo(values).then((res) => {
      if(res.flag){
        message.success('操作成功！');
        handleCancel()
        actionRef.current.reload()
      }else{
        notification.error({
          message: `请求错误 ${res.status}`,
          description: res.error,
        });
      }
      setLoading(false)
    })
  }

  const updateParameter = (record) =>{
    setVisible(true)
    if(record){
      setRecord(record)
    }
  }

  const delParameter = (id) =>{
    deleteParameterById(id).then(res => {
      if(res.flag){
        message.success('删除成功！');
        actionRef.current.reload()
      }else{
        message.error(res.error)
      }
    })
  }

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '类型',
      dataIndex: 'type',
      align: 'center',
    },
    {
      title: '参数',
      dataIndex: 'value',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '创建人',
      dataIndex: 'createName',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      align: 'center',
      render: (text) => {
        return text ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: '10%',
      render: (item, record) => (
        <>
          <a onClick={() => updateParameter(record)}>修改</a>
          <Divider type="vertical"/>
          <Popconfirm title={`是否确认删除?`}
                      onConfirm={() => delParameter(record.id)}
                      okText="是" cancelText="否">
            <a>删除</a>
          </Popconfirm>
        </>
      ),
    },
  ]

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        request={(params) => queryParameterList(params)}
        columns={columns}
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" onClick={() => updateParameter(null)}>新建</Button>,
        ]}
      />
      <AddForm
        record={record}
        loading={loading}
        visible={visible}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
}

export default connect(() => ({
}))(TableList)
